<!--
*@Author: QWP
*@Description: 部门考勤
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100">
    <a-layout class="f-h-100">
      <a-layout-header style="padding: 0; background-color: #F0F2F5; height: auto">
        <u-card title="部门考勤">
          <a-list :grid="{ column: 3 }" :data-source="deptCheckTotal">
            <template #renderItem="{ item }">
              <a-list-item style="padding: 0 12px;">
                <u-card :style="totalBgColor[item.type]"
                  style="padding: 12px 0; width: 100%">
                  <a-row align="middle">
                    <div style="width: 60px; height: 60px; background-color: rgba(24,144,255,0.2); border-radius: 50%;
                      text-align: center; line-height: 60px; color: #fff; font-size: 30px;">
                      <TeamOutlined />
                    </div>
                    <a-space direction="vertical" 
                      class="f-margin-l10">
                      <span style="font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 16px;
                        color: #333333;" >{{ item.title }}</span>
                      <span style="font-family: DIN, DIN;
                        font-weight: 500;
                        font-size: 24px;
                        color: #1D2129;">{{ item.userNumber }}</span>
                      <span style="font-family: PingFang SC, PingFang SC;
                        font-weight: 400;
                        font-size: 12px;
                        color: #4E5969;">较昨日 
                        <span style="font-family: PingFang SC, PingFang SC;
                          font-weight: 400;
                          font-size: 14px;
                          color: #F53F3F;">{{ item.changeNumber }}人</span> 
                        <RiseOutlined style="color: #F53F3F;" v-if="item.trend == 'up'"/>
                        <FallOutlined  style="color: #00B42A " v-else-if="item.trend == 'down'"/>
                      </span>
                    </a-space>
                  </a-row>
                </u-card>
              </a-list-item>
            </template>
          </a-list>
        </u-card>
      </a-layout-header>
      <a-layout-content class="f-margin-t12 s-bg-white">
        <a-space>请假类型：<a-select class="f-w-px-150"></a-select></a-space>
        <u-table :columns="columns" :data="tabData" :scroll="{}"></u-table>
      </a-layout-content>
    </a-layout>
    <a-layout-sider width="320" class="f-margin-l12" style="background-color: unset;">
      <WeatherWelcome />

      <u-card class="f-margin-t12" >
        <a-calendar v-model:value="value" :fullscreen="false"/>
      </u-card>
    </a-layout-sider>
  </a-layout>
  
  <!-- 导入 -->
  <!-- <u-imp-data v-model:open="showImp"></u-imp-data> -->
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch, CSSProperties } from "vue";
import { useRoute, useRouter, onBeforeRouteUpdate, onBeforeRouteLeave} from "vue-router";
import { _IFormEl } from "@/components/common/form/interface";
import { ColProps, FormItemProps, TableColumnProps } from "ant-design-vue";
import { CheckCircleOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { numberC } from '@/util/common'
import { formatAmt, } from '@/util/format.ts'
import dayjs from "dayjs";
import { cloneDeep } from 'lodash'
import MyCheckInCharts from "./MyCheckInCharts.vue";
import MyVacation from './MyVacation.vue'
import CheckCalender from './CheckCalender.vue'
import CalenderC from '@/views/oa/assist/myCalender/Calender.vue'
import WeatherWelcome from './WeatherWelcome.vue'
const route = useRoute();
const router = useRouter();

onMounted(() => {
})

// 部门考勤总览数据
const totalBgColor = {
  'zg': { background: 'linear-gradient( 180deg, #EFF7FF 0%, #D4EAFF 100%)' },
  'bq': { background: 'linear-gradient( 180deg, #FFF6ED 0%, #FFECDA 100%)' },
  'qj': { background: 'linear-gradient( 180deg, #F0F2FF 0%, #ECECFF 100%)' },
}
const deptCheckTotal = reactive([
  { title: '在岗(值班)人员', userNumber: 30, trend: 'up', type: 'zg', changeNumber: 2, },
  { title: '备勤人员', userNumber: 40, trend: 'up', type: 'bq', changeNumber: 4, },
  { title: '请假人员', userNumber: 10, trend: 'down', type: 'qj', changeNumber: 2,},
])

// 列表
const tabData = reactive([
  { a: "研发部门", b: "丁艳玲", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
  },
  { a: "研发部门", b: "马权", b1: '备勤', b2: '2024-06-01', jbr: '2024-06-10', lrsj: '2024-06-01  15:00', ts: '10天', sy: '暂无', fj: '暂无附件',
  },
]);
let columns: Array<TableColumnProps> = reactive([
  { dataIndex: "a", title: "姓名", width: 100 },
  { dataIndex: "b", title: "部门", width: 100 },
  { dataIndex: "b1", title: "联系电话", width: 150 },
  { dataIndex: "b2", title: "类型", width: 150 },
  { dataIndex: "jbr", title: "天数", width: 150 },
  { dataIndex: "lrsj", title: "备注", width: 150 },
]);


</script>

<style lang="scss">
.u-tx-bg {
  background-color: #E7F4FF !important
}
.u-bq-bg {
  background-color: #FDEAD6 !important;
  border-color: #FA8C16 !important;
}
.u-kqrl-title {
  position: absolute;
  top: 16px;
  left: 18px;
  font-family: PingFang SC, PingFang SC;
  font-weight: 600;
  font-size: 16px;
  color: #303133;
}
.u-myapplicant-item {
  padding-left: 10px;
  border-left: 3px solid #1890FF ;
}
</style>
